<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
   <HEAD>
      <script type="text/javascript" src="jquery.js"></script>
      <TITLE>Snake<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
       Clone</TITLE>
   </HEAD>
   <BODY>
      <canvas id="canvas" width="600" height="600"></canvas>
      
      <style type="text/css">
        canvas {
          border:1px solid #d4d4d4;
        }
      </style>
      
      <script type="text/javascript">

        // BEGIN LIBRARY
        
        var WIDTH;
        var HEIGHT;
        var ctx;
        var intervalId;
        
        function circle(x,y,r) {
          ctx.beginPath();
          ctx.arc(x, y, r, 0, Math.PI*2, true);
          ctx.closePath();
          ctx.fill();
        }

        function rect(x,y,w,h) {
          ctx.beginPath();
          ctx.rect(x,y,w,h);
          ctx.closePath();
          ctx.fill();
        }
        
        function init() {
          ctx = $('#canvas')[0].getContext("2d");
          WIDTH = $("#canvas").width()
          HEIGHT = $("#canvas").height()
          intervalId = setInterval(draw, 200);// run draw function every 10ms
          return intervalId;
        }
        
        var oldDirections = [39,39,39,39,39,39];
        var directions = [39,39,39,39,39,39];
        
        //set rightDown or leftDown if the right or left keys are down
        function onKeyDown(evt) {
          directions[0] = evt.keyCode;
        }
        
        $(document).keydown(onKeyDown);
        
        //END LIBRARY

        var intervalId2;
        var snakeLength = 6;
        var snakeXs = [100,85,70,55,40,25];
        var snakeYs = [10,10,10,10,10,10];
        var dx = 15, dy = 15;
        var addBlockTrue = false;
        
        function addBlock() {
          addBlockTrue = true;
        }
        
        function draw() {

          ctx.clearRect(0,0,WIDTH,HEIGHT);
          
          ctx.fillStyle = "#00A308";
          
          // step 1 of adding a new block
          if (addBlockTrue) {
            snakeXs.push(snakeXs[snakeLength-1]);
            snakeYs.push(snakeYs[snakeLength-1]);
            oldDirections.push(oldDirections[snakeLength-1]);
            directions.push(directions[snakeLength-1]);
          }
          
          // draw each block and update their position
          var i;
          for (i = 0; i < snakeLength; i++) {
              
            // this is the only draw line: it should
            // be moved into a different function
            rect(snakeXs[i],snakeYs[i],14,14);
            
            if (i != 0) {
              directions[i] = oldDirections[i-1];
            }
            
            // update
            switch(directions[i]) {
              case 40://down
                snakeYs[i] += dy;break;
              case 38://up
                snakeYs[i] -= dy;break;
              case 39://right
                snakeXs[i] += dx;break;            
              case 37://left
                snakeXs[i] -=dx;break;
            }            
          }
          for (i=0; i<snakeLength;i++){
            oldDirections[i]=directions[i];
          }
        
          // step 2 of adding a new blcok
          if (addBlockTrue) {
            snakeLength += 1;
            addBlockTrue = false;
          }

          // check for death
          var death = false;
          if (snakeXs[0] < 0 || snakeXs[0] > WIDTH)
            death = true;
          if (snakeYs[0] < 0 || snakeYs[0] > HEIGHT)
            death = true;
          //...also check for body collisions
          
          if (death) {
            ctx.fillStyle = "#00A308";
            ctx.fillRect(0,0,WIDTH,HEIGHT);
            clearInterval(intervalId);
            clearInterval(intervalId2);
          }
            
        }
        
        init();
        intervalId2 = setInterval(addBlock, 1000);

      </script>
   </BODY>
</HTML>